<template>
    <div id="information">
        <el-form size="mini" :model="informationForm" :rules="rules" ref="informationForm" label-width="100px"
                 class="demo-ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 40%">
                        <el-upload v-if="loginEid!=1"
                                   class="avatar-uploader"
                                   action="http://192.168.43.195:9000/personnel_management/employee/uploadImg"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
<!--                        action="http://localhost:9000/personnel_management/employee/uploadImg"-->
                        <el-upload disabled v-if="loginEid==1"
                                   class="avatar-uploader"
                                   action="http://192.168.43.195:9000/personnel_management/employee/uploadImg"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 40%" label="电话号码：" prop="username">

                        <el-input v-if="loginEid==1" readonly max="11" v-model="informationForm.username"></el-input>
                        <el-input v-if="loginEid!=1" max="11" v-model="informationForm.username"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item style="width: 40%" label="姓名：" prop="nickName">
                        <el-input v-if="loginEid!=1"  v-model="informationForm.nickName"></el-input>
                        <el-input v-if="loginEid==1" readonly v-model="informationForm.nickName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 40%" label="身份证号：" prop="idCard">
                        <el-input v-if="loginEid!=1" v-model="informationForm.idCard"></el-input>
                        <el-input v-if="loginEid==1" disabled v-model="informationForm.idCard"></el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item style="width: 40%" label="年龄：">
                        <el-input v-if="loginEid!=1" type="number" min="18" max="70" v-model="informationForm.age"></el-input>
                        <el-input v-if="loginEid==1" readonly type="number" min="18" max="70" v-model="informationForm.age"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item v-if="loginEid!=1" style="width: 40%" label="所属部门：">
                        <el-select disabled v-if="loginEid!=1" style="width: 200px" v-model="informationForm.deptId"
                                   placeholder="请选择部门"
                                   filterable
                                   @change="$forceUpdate()"
                                   clearable>
                            <el-option
                                    v-for="item in options"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item style="width: 40%" label="住址：">
                        <el-input v-if="loginEid!=1"  type="text" v-model="informationForm.address"></el-input>
                        <el-input v-if="loginEid==1" readonly type="text" v-model="informationForm.address"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item style="width: 40%" label="备注：">
                        <el-input v-if="loginEid!=1" type="textarea" cols="50" rows="3" v-model="informationForm.info"></el-input>
                        <el-input v-if="loginEid==1" readonly type="textarea" cols="50" rows="3" v-model="informationForm.info"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item style="width: 40%" label="性别：">
                        <el-select v-if="loginEid!=1" style="width: 200px" v-model="informationForm.sex"
                                   @change="$forceUpdate()"
                                   placeholder="请选择性别"
                                   clearable>
                            <el-option label="女" value="0"></el-option>
                            <el-option label="男" value="1"></el-option>
                        </el-select>
                        <el-select v-if="loginEid==1" disabled style="width: 200px" v-model="informationForm.sex"
                                   @change="$forceUpdate()"
                                   placeholder="请选择性别"
                                   clearable>
                            <el-option label="女" value="0"></el-option>
                            <el-option label="男" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item style="width: 75%">
                <el-button v-if="loginEid!=1" type="primary" @click="submitInformationForm('informationForm')">提交</el-button>
                <el-button v-if="loginEid!=1" @click="resetForm('informationForm')">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script>
    import {listByQo} from "@/api/personnel_management/department/deptApi";
    import {popup} from "@/assets/js/common";
    import {queryInformation} from "@/api/personal/personApi";
    import {update} from "@/api/personnel_management/employee/empApi";
    import {loginEmp} from "@/assets/js/auth";

    export default {
        data() {
            return {
                loginEid: loginEmp().id,
                informationForm: {},
                imageUrl: '',
                options: [],
                rules: {
                    username: [
                        {required: true, message: '手机号不能为空', trigger: 'blur'},
                    ],
                    nickName: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'},
                    ],
                    idCard: [
                        {required: true, message: '身份证号不能为空', trigger: 'blur'},
                    ],
                },
            }
        },
        methods: {
            deptAll() {
                listByQo({}).then(res => {
                    res = res.data;
                    if (res.code == 200) {
                        this.options = res.data
                    } else {
                        popup(res.msg, "error")
                    }
                })
            },
            init() {
                queryInformation().then(res => {
                    res = res.data
                    if (res.code == 200) {
                        this.informationForm = {...res.data}
                        this.imageUrl = this.informationForm.headImg
                    } else {
                        popup(res.msg, "error")
                    }
                })

            },
            submitInformationForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        update(this.informationForm).then(res => {
                            res = res.data
                            if (res.code == 200) {
                                popup("更新成功")
                            } else {
                                popup(res.msg, "error")
                            }
                            this.init()
                        })
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
                this.init()
            },
            /*上传头像*/
            handleAvatarSuccess(res) {
                this.informationForm.headImg=res.url
                this.imageUrl = res.url;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 3;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 3MB!');
                }
                return isJPG && isLt2M;
            },

        }, mounted() {
            this.imageUrl = ''
            this.deptAll()
            this.init()
        }
    }
</script>
